<template>
  <div class="traffic-chart"
    id="worldChart"></div>
</template>
<script>
import '../node_modules/echarts/map/js/world.js'
import { mapState } from 'vuex'
export default {
  name: 'WorldChart',
  props: {
    chartData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      myWorldChart: null,
    }
  },
  watch: {
    chartData: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.worldChart()
          })
        }
      },
    },
  },
  computed: {
    ...mapState({
      countries: (state) => state.countries,
    }),
  },
  mounted() {
    window.addEventListener('resize', this.resizeHandler)
  },
  methods: {
    worldChart() {
      this.myWorldChart = this.$echarts.init(
        document.getElementById('worldChart')
      )
      let that = this

      let echartData = []
      if (this.chartData && this.chartData.length) {
        this.chartData.forEach((item) => {
          const obj = {}
          obj.name = this.getCountryLabel(item.two_code)
          obj.value = item.value
          echartData.push(obj)
        })
      }

      const option = {
        dataRange: {
          show: false,
          min: 0,
          max: 1,
          text: ['High', 'Low'],
          color: ['#2184fd', '#66b1ff'],
        },
        // 提示框组件
        tooltip: {
          trigger: 'item',
          // 提示框浮层内容格式器
          formatter: function (val) {
            if (val.data == null) return
            return (
              val.data.name +
              ': ' +
              Number(val.data.value * 100).toFixed(2) +
              '%'
            )
          },
        },
        geo: {
          map: 'world',
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: false,
          silent: true,
          itemStyle: {
            // 每个区域的样式
            normal: {
              areaColor: '#000',
              borderColor: '#D3D7E1', // 图形的描边颜色
              borderWidth: 0.5, //描边线宽
            },
            //   emphasis: {
            //     // 高亮状态
            //     areaColor: "red"
            //   }
          },
          // itemStyle: {
          //   normal: {
          //     areaColor: "#37376e",
          //     borderColor: "#000"
          //   },
          //   emphasis: {
          //     areaColor: "#3E98FE"
          //   }
          // }
        },
        series: [
          {
            name: '校友人数',
            type: 'map',
            mapType: 'world',
            itemStyle: {
              normal: {
                borderWidth: 0.5,
                borderColor: '#A9A9A9',
                areaStyle: {
                  color: '#2184fd',
                },
              },
              emphasis: {
                borderColor: '#fff',
                borderWidth: 0.5,
                areaColor: '#66b1ff', //区域移动上去的颜色
              },
            },
            mapLocation: {
              y: 100,
            },
            data: echartData,
            //   [
            //     {
            //       name: "India",
            //       value: 32423
            //     }
            //   ]
            symbolSize: 12,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
          },
        ],
      }

      this.myWorldChart.setOption(option)

      this.myWorldChart.on('mouseover', function (params) {
        if (!params.data || !params.data.value) {
          that.myWorldChart.dispatchAction({
            type: 'downplay',
          })
        }
      })
    },
    getCountryLabel(val) {
      let obj = this.countries.find((item) => {
        return val.toLowerCase() === item.value.toLowerCase()
      })
      if (obj && obj.label) {
        return obj.label
      } else {
        return val
      }
    },
    resizeHandler() {
      if (this.myWorldChart) {
        this.myWorldChart.resize()
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeHandler)
    if (!this.myWorldChart) {
      return
    }
    this.myWorldChart.dispose()
    this.myWorldChart = null
  },
}
</script>
<style lang="scss" scoped>
.traffic-chart {
  height: 270px;
  margin-top: 50px;
}
</style>
